<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/structAdmin.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:define name="content">

        <p:panel header="Gestionar Cliente" style="border: 0">

            <h:form id="form">
                <p:panel header="Información Personal" id="panel" style="margin: 20px 0px 5px 0px;" >
                    <p:messages id="msgs" globalOnly="true" closable="true" />

                    <h:panelGrid columns="4" cellpadding="3" >

                        <h:outputText value="Nombre: *" />
                        <p:inputText value="#{clienteBean.cliente.nombre}" required="true"/>

                        <h:outputText value="Apellido: *"/>
                        <p:inputText value="#{clienteBean.cliente.apellido}" required="true"/>

                        <h:outputText value="Identificación: *"/>
                        <pe:inputNumber maxlength="10" maxValue="9999999999" decimalSeparator="none" value="#{clienteBean.cliente.cedula}" required="true"/>  

                        <h:outputText value="Direccion: *"/>
                        <p:inputText value="#{clienteBean.cliente.direccion}" required="true"/>

                        <h:outputText value="Email:"/>
                        <p:inputText value="#{clienteBean.cliente.email}" required="false"/>

                        <h:outputText value="Fijo:"/>
                        <pe:inputNumber  maxlength="10" maxValue="9999999999" decimalSeparator="none" value="#{clienteBean.cliente.fijo}" required="false"/>

                        <h:outputText value="Celular:"/>
                        <pe:inputNumber  maxlength="10" maxValue="9999999999" decimalSeparator="none" value="#{clienteBean.cliente.celular}" required="false"/>

                        <h:outputLabel value="Ciudad: *"/>
                        <p:selectOneMenu required="true" requiredMessage="No puedes dejar este campo sin selección."  label="ciudad" id="ciudad" value="#{clienteBean.cliente.codCiudad}" converter="CiudadConvertor" >
                            <f:selectItem itemLabel="Seleccione..." value="#{null}" />
                            <f:selectItems value="#{ciudadBean.obtenerCiudades()}"/>
                        </p:selectOneMenu>

                    </h:panelGrid>
                </p:panel>


                <p:commandButton styleClass="buttonMain" style="margin: 0px 15px 0px 0px;" value="Guardar" actionListener="#{clienteBean.saveAction()}" icon="ui-icon-disk"  update="@form,:form:panel,:ftCliente:tClient" />
                <p:commandButton value="Cancelar" styleClass="buttonSecundary" actionListener="#{clienteBean.cancelAction()}" icon="ui-icon-close" update="@form,:form:panel" />
            </h:form> 

            <h:form id="ftCliente">

                <p:dataTable id="tClient" var="cliente" style="margin: 20px 0px 5px 0px;" 
                             value="#{clienteBean.obtenerClientes()}"  
                             paginator="true" rows="15"  
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,15" 
                             paginatorPosition="bottom">  
                    <f:facet name="header">  
                        Clientes Registrados
                    </f:facet>  

                    <p:column headerText="Identificación">   
                        <h:outputText value="#{cliente.cedula}" />  
                    </p:column>  

                    <p:column headerText="Nombre">   
                        <h:outputText value="#{cliente.nombre}" />  
                    </p:column>  

                    <p:column headerText="Apellido">  
                        <h:outputText value="#{cliente.apellido}" />  
                    </p:column> 

                    <p:column headerText="Email">  
                        <h:outputText value="#{cliente.email}" />  
                    </p:column> 

                    <p:column headerText="Dirección">  
                        <h:outputText value="#{cliente.direccion}" />  
                    </p:column> 

                    <p:column headerText="Fijo">  
                        <h:outputText value="#{cliente.fijo}" />  
                    </p:column> 

                    <p:column headerText="Celular">  
                        <h:outputText value="#{cliente.celular}" />  
                    </p:column>  

                    <p:column headerText="Puntos">  
                        <h:outputText value="#{cliente.cantidadpuntos}" />  
                    </p:column> 

                    <p:column headerText="Acción" >
                        <p:commandLink title="Editar" styleClass="action-edit" ajax="true" action="#{clienteBean.setStored(true)}"  process="@this" update=":form:panel" >
                            <f:setPropertyActionListener value="#{cliente}" target="#{clienteBean.cliente}" />
                            <h:graphicImage url="../../resources/images/edit-icon.png" styleClass="icon" />
                        </p:commandLink>
                        <p:commandLink title="Eliminar" ajax="true" actionListener="#{clienteBean.removeAction(cliente)}"  process="@this" update="@form,:form:msgs" >
                            <h:graphicImage url="../../resources/images/delete-icon.png" styleClass="icon" />
                        </p:commandLink>
                    </p:column>

                </p:dataTable>  
            </h:form>
            
            
        
            <p:notificationBar  position="bottom" effect="slide" widgetVar="bar"  >  
                <h:outputText value="VetxSoft!" style="color:#1A202C;font-size:16px;" /> 
                <br/>
                <br/>
                <h:outputText value="Bienvenido!, usted se encuentra en el registro de clientes." style="color:#1A202C;font-size:12px;" />
                <br/>
                <h:outputText value="Para completar exitosamente el registro de cliente usted deberá ingresar todos los datos que se encuentren con un asterisco (*)" style="color:#1A202C;font-size:12px;" />
                <br/>
                <h:outputText value="A continuación seleccione la opción Guardar o Cancelar. " style="color:#1A202C;font-size:12px;" />
                <br/>
                <h:outputText value="Si selecciona la opción guardar y los datos son correctos se guardara exitosamente el cliente y se mostrara en pantalla" style="color:#1A202C;font-size:12px;" />
                <br/>
                <h:outputText value="Si selecciona la opción cancelar se borraran los datos anteriormente ingresados" style="color:#1A202C;font-size:12px;" />
                           
                
            </p:notificationBar>  

            <p:commandButton  value="Mostrar Ayuda" onclick="bar.show();" type="button" />  
            <p:commandButton  value="Ocultar Ayuda" onclick="bar.hide();" type="button" />

        </p:panel>
    </ui:define>

</ui:composition>

